<template>
  <div>
    <el-container class="manager-container">
      <!-- this is manager page -->
      <!-- 导航菜单上的湖大logo -->
      <el-main>
        <div class="bg-breadcrumb">
          <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/student/studenthomepage' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>学生选课中心</el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <!-- 可选课程列表 -->
        <el-row class="row-card">
          <div class="border-card">
            <el-card shadow class="selectable-card">
              <el-table
              :data="SelectCourseTable"
              size="small"
              border>
                  <el-table-column label="课程编码" align="center" prop="course_teacher_num"></el-table-column>
                  <el-table-column label="课程名" align="center" prop="course_name"></el-table-column>
                  <el-table-column label="上课专业" align="center" prop="class_name"></el-table-column>
                  <el-table-column label="课程类型" align="center" prop="genre"></el-table-column>
                  <el-table-column label="开课学院" align="center" prop="school_name"></el-table-column>
                  <el-table-column label="上课老师" align="center" prop="teacher_name"></el-table-column>
                  <el-table-column label="学分" align="center" prop="credict"></el-table-column>
                  <el-table-column label="上课时间" align="center">
                    <template slot-scope="scope">
                      <el-dropdown trigger="click">
                        <span class="el-dropdown-link">
                          显示内容<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item v-for="(item, index) in scope.row.timeList" :key="index">{{ item.courseTime }}</el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </template>
                  </el-table-column>
                  <!-- 操作 -->
                  <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button @click="selectCourse(scope.$index)" :disabled="scope.row.selected" size="mini" type="danger">{{ scope.row.selected ? '已选' : '选课' }}</el-button>
                    </template>
                  </el-table-column>
              </el-table>
              <el-pagination
                background
                style="float: right; padding: 10px;"
                :page-size="10"
                @current-change="handleCurrentChange"
                layout="total, prev, pager, next"
                :total="totalBeSelected">
              </el-pagination>
            </el-card>
          </div>
        </el-row>

        <!-- 下方的记录 -->
        <el-row class="row-card">
          <el-tabs type="border-card">

            <el-tab-pane label="选课课表">
              <!-- 下方的课表 -->
              <el-card shadow class="selectable-card2">
                <!-- <v-ClassTable :classTableData="classTableData"/> -->
                <div style="margin-bottom: 10px;">
                  第
                  <el-select size="small" @change="renderCourseTable()" v-model="weekVal" placeholder="请选择">
                    <el-option
                      v-for="(item, index) in weeks"
                      :key="index"
                      :label="item"
                      :value="item">
                    </el-option>
                  </el-select>
                  周
                </div>
                <div>
                  <v-ClassTable class="course-table" :classTableData="classTableData" />
                </div>
              </el-card>
            </el-tab-pane>

            <el-tab-pane label="已选课程管理">
              <el-card shadow="always" :body-style="{ padding: '20px' }" >
                <el-table
                :data="selectedCourses"
                size="small"
                border>
                  <el-table-column label="课程编码" align="center" prop="course_teacher_num"></el-table-column>
                  <el-table-column label="课程名" align="center" prop="course_name"></el-table-column>
                  <el-table-column label="课程类型" align="center" prop="genre"></el-table-column>
                  <el-table-column label="开课学院" align="center" prop="school_name"></el-table-column>
                  <el-table-column label="上课老师" align="center" prop="teacher_name"></el-table-column>
                  <el-table-column label="学分" align="center" prop="credict"></el-table-column>
                  <!-- <el-table-column label="上课时间" align="center">
                    <template slot-scope="scope">
                      <el-dropdown trigger="click">
                        <span class="el-dropdown-link">
                          显示内容<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item v-for="(item, index) in scope.row.timeList" :key="index">{{ item.courseTime }}</el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </template>
                  </el-table-column> -->
                  <!-- 操作 -->
                  <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                      <!-- <el-button @click="selectCourse(scope.$index)" :disabled="scope.row.selected" size="mini" type="danger">{{ scope.row.selected ? '已选' : '选课' }}</el-button> -->
                      <el-button @click="dropCourse(scope.row.id)" size="mini" type="danger">退课</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </el-tab-pane>
          </el-tabs>
        </el-row>

      </el-main>
    </el-container>
  </div>
</template>

<script>
import ClassTable from '@/components/ClassTable.vue'
export default {
  data () {
    return {
      // 当前页面数
      currentPage: 1,
      SelectCourseTable: [],
      weeks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
      // 选择第几周
      weekVal: 1,
      classTableData: {
        weeks: ['', '一', '二', '三', '四', '五', '六', '日'],
        courses: []
      },
      // 所有的可选课程个数
      totalBeSelected: 0,
      // 已选课程列表
      selectedCourses: []
    }
  },
  components: {
    'v-ClassTable': ClassTable
  },
  created () {
    this.getCourseSelectionList()
    this.renderCourseTable()
    this.getSelectedList()
  },
  methods: {
    // 展示所有可选课程
    async getCourseSelectionList () {
      this.SelectCourseTable = []
      const { data: res } = await this.$http.post(`/courseSelection/student/getCourseSelectionList?page=${this.currentPage - 1}&rows=10`)
      this.totalBeSelected = res.detail.total
      console.log(res)
      if (!res.state) return this.$message.error(res.msg)
      const dataList = res.detail.list
      dataList.forEach(item => {
        // const { data: resp } = await this.$http.post(`courseManagement/all/selectCourseManagementListById?id=${item.id}`)
        this.$http({
          method: 'post',
          url: `courseManagement/all/selectCourseManagementListById?id=${item.id}`
        }).then(resp => {
          if (!resp.data.state) return this.$message.error(resp.msg)
          item.timeList = resp.data.detail.courseTime
          item.selected = false
          // 因为push的这一步是异步的所以会出现顺序问题
          this.SelectCourseTable.push(item)
        })
      })
    },

    // 渲染课表
    async renderCourseTable () {
      const { data: res } = await this.$http.post(`courseManagement/getTable?week=${this.weekVal}`)
      // console.log(res)
      if (!res.state) return this.$message.error(res.msg)
      this.classTableData.courses = res.detail
      // 定一个占满所有位置的二维数组
      const courses = [
        [{}, {}, {}, {}, {}, {}, {}],
        [{}, {}, {}, {}, {}, {}, {}],
        [{}, {}, {}, {}, {}, {}, {}],
        [{}, {}, {}, {}, {}, {}, {}],
        [{}, {}, {}, {}, {}, {}, {}],
        [{}, {}, {}, {}, {}, {}, {}]
        // [{}, {}, {}, {}, {}, {}, {}],
        // [{}, {}, {}, {}, {}, {}, {}],
        // [{}, {}, {}, {}, {}, {}, {}]
      ]
      // 这个算法真的还可以，首先将所有的课程用item来遍历一遍
      // 将对应的下标推到courses对应的格子中去
      res.detail.forEach((item, index) => {
        item.forEach((subitem, idx) => {
          courses[index][subitem.weekCode] = subitem
        })
      })
      this.classTableData.courses = courses
    },

    // 选择课程
    async selectCourse (index) {
      const { data: res } = await this.$http.post(`courseSelection/student/createCourseSelectionList?courseTeacherId=${this.SelectCourseTable[index].id}`)
      // console.log(res)
      if (!res.state) return this.$message.error(res.msg)
      this.SelectCourseTable[index].selected = true
      // 选课成功提示
      this.$message.success('选课成功!')
      this.renderCourseTable()
      this.getSelectedList()
    },

    // 展示已选课程列表
    async getSelectedList () {
      const { data: res } = await this.$http.post('courseSelection/student/getStudentCourseSelectionList?page=0&rows=10')
      console.log(res)
      if (!res.state) return this.$message.error(res.msg)
      this.selectedCourses = res.detail
    },

    // 退课逻辑
    dropCourse (id) {
      this.$confirm('确认要退课吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { data: res } = await this.$http.post(`courseSelection/student/deleteCourseSelection?id=${id}`)
        // console.log(res)
        if (!res.state) return this.$message.error(res.msg)
        this.$message.success('退课成功!')
        this.getSelectedList()
        this.renderCourseTable()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },

    // 更改当前页
    handleCurrentChange (page) {
      this.currentPage = page
      this.getCourseSelectionList()
    }

  }
}
</script>

<style lang="less" scoped>
.manager-container {
  height: 100vh;
  background-color: #f0f1f7;
  width: 100%;

  .el-main {
    padding: 0px;

    .row-card {
      margin: 20px;

      .border-card {
        width: 90%;
      }
    }

    .selectable-card {
      width: 1480px;
    }

    .selectable-card2 {
      width: 100%;
    }

    .el-breadcrumb {
      height: 35px;
      line-height: 35px;
      margin-left: 2%;
    }

    .el-dropdown-link {
      cursor: pointer;
      color: #27B148;
    }
  }
}
</style>
